<<<<<<< HEAD
<template>
  <div class='container'>试题录入</div>
</template>

<script>
export default {}
</script>

<style scoped lang='less'></style>
=======
/* eslint-disable brace-style */
<template>
  <div class='container'>

    <el-card class="boxstyle">
      试题录入
      <hr>
      <el-form ref="addForm" :model="formDate" label-width="80px" :rules="pubFormRules">
        <!-- 学科 -->
        <el-form-item label="学科:" prop="subjectID">
          <el-select v-model="formDate.subjectID" placeholder="请选择" @change="catalog">
            <el-option v-for="(item,index) in content" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- 目录 -->
        <el-form-item label="目录:" prop="catalogID">
          <el-select v-model="formDate.catalogID" placeholder="请选择">
            <el-option v-for="(item,index) in directory" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- 企业 -->
        <el-form-item label="企业:" prop="enterpriseID">
          <el-select v-model="formDate.enterpriseID" placeholder="请选择">
            <el-option v-for="item in enterprises" :key="item.id" :label="item.shortName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 城市 -->
        <el-form-item label="城市:" prop="city">
          <!-- 市 -->
          <el-select v-model="formDate.city" placeholder="请选择城市" @change="Gocitys">
            <el-option v-for="(item,index) in Onprovinces" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <!-- 县 -->
          <el-select v-model="formDate.enterprise" placeholder="请选择区域">
            <el-option v-for="(item,index) in Oncitys" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 方向 -->
        <el-form-item label="方向:" prop="direction">
          <el-select v-model="formDate.direction" placeholder="请选择">
            <el-option v-for="(item,index) in direction" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <!-- 题型 -->
        <el-form-item label="题型:" prop="questiontype">
          <el-radio-group v-model="formDate.questiontype" @change="questionchange">
            <template v-for="(obj,index) in questionType">
              <el-radio :key="index" :value="obj.value" :label="obj.value">{{obj.label}}</el-radio>
            </template>
          </el-radio-group>
        </el-form-item>
        <!-- 难度 -->
        <el-form-item label="难度:" prop="difficulty">
          <el-radio-group v-model="two">
            <el-radio v-for="(obj,index) in difficulty" :key="index" v-model="formDate.difficulty" :label="obj.label"></el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 题干 -->
        <el-form-item label="题干" prop="question">
          <!-- 使用 v-model 进行双向的数据绑定  富文本-->
          <quill-editor v-model="formDate.question"></quill-editor>
        </el-form-item>
        <!-- 绑定 v-show 控制选项是否隐藏 -->
        <div v-show="isShow">
          <!-- 单选框 上传图片 1-->
          <div>
            <strong>选项:</strong>
          </div>
          <template>
            <el-radio-group v-model="radio">
              <!-- 111111111 -->
              <!-- 单选框 -->
              <div v-for="(item,index) in formDate.options" :key="index" class="radiochoices" v-show="radiochoice">
                <el-radio :label="index">{{item.code}}
                  <el-input placeholder="" v-model="item.title" clearable class="oninput">
                  </el-input>
                  <!-- 上传图片-->
                  <div class="imgupload">
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <p v-else style="height:30px;width:90px;line-height:30px;">上传图片<i class="el-icon-circle-close"></i></p>
                    </el-upload>
                  </div>
                </el-radio>
              </div>
            </el-radio-group>
            <!-- 复选框 -->

            <div v-for="item in formDate.checkouted" :key="item.id" class="radiochoices" v-show="showCheckbox">
              <el-checkbox :label="item.id" class="checkboxouted">{{item.code}}
                <el-input placeholder="" v-model="item.title" clearable class="oninput">
                </el-input>
              </el-checkbox>
              <!-- 上传图片-->
              <div class="imgupload">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <p v-else style="height:30px;width:90px;line-height:30px;">上传图片<i class="el-icon-circle-close"></i></p>
                </el-upload>
              </div>
            </div>
          </template>
          <!-- 新增按钮 -->
          <el-row>
            <el-button style="margin:20px 90px" size="small" icon="el-icon-plus" type="danger" :disabled='disableds' @click="onAdd">增加选项与答案</el-button>
          </el-row>
        </div>

        <!-- 视频解析 -->
        <el-form-item label="视频解析" prop="videoURL">
          <el-input v-model="formDate.videoURL" label-width="80px" />
        </el-form-item>
        <!-- 答案解析 -->
        <el-form-item label="答案解析" prop="answerID">
          <!-- 使用 v-model 进行双向的数据绑定 -->
          <quill-editor v-model="formDate.answerID"></quill-editor>
        </el-form-item>
        <!-- 题目备注 -->
        <el-form-item label="题目备注" prop="remarks">
          <el-input type="textarea" class="remarks" v-model="formDate.remarks"></el-input>
        </el-form-item>
        <!-- 试题标签 -->
        <el-form-item label="试题标签" prop="tags">
          <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" effect="dark" @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">添加试题</el-button>
        </el-form-item>
        <template>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">确认提交</el-button>
          </el-form-item>
        </template>
      </el-form>
    </el-card>
  </div>

</template>

<script>
// import { add } from '../../api/hmmm/questions.js'
// 导入方向 题型 难度接口
import { direction, questionType, difficulty } from '../../api/hmmm/constants'
// 导入城市接口
import { provinces, citys } from '../../api/hmmm/citys'
// 学科接口
import { simple } from '../../api/hmmm/subjects'
// 导入目录简单列表
import { simple as simples } from '../../api/hmmm/directorys'
import { list as lists } from '../../api/hmmm/companys'
export default {
  data () {
    return {
      itemsInput: [],
      // 控制单选框显示隐藏
      radiochoice: true,
      // 控制复选框显示隐藏
      showCheckbox: false,
      // tag 标签
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      // 控制新增按钮是否禁用
      disableds: true,
      // 控制单选高亮显示
      one: 1,
      // 控制简单高亮显示
      two: '简单',
      // 题型单框按钮
      questionType,
      // 难度按钮
      difficulty,
      // 显示隐藏单选框
      isShow: true,
      // 按钮
      openDisabled: false,
      input: '',
      // 图片
      imageUrl: '',
      // 单选框
      radio: 3,
      direction,
      // 城市
      Onprovinces: [],
      Oncitys: [],
      questionTypes: -1,
      // 表单
      formDate: {
        // 单选
        options: [{
          id: 1,
          code: 'A', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          id: 2,
          code: 'B', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          id: 3,
          code: 'C', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          id: 4,
          code: 'D', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }],
        // 复选框
        checkouted: [{
          code: 'A', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          code: 'B', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          code: 'C', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          code: 'D', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }], // 选项
        catalogID: '', // 目录
        subjectID: '', // 学科
        enterpriseID: '', // 企业
        city: '', // 城市
        province: '', // 省份
        direction: '', // 方向
        questiontype: 1, // 题型
        videoURL: '', // 视频解析
        difficulty: '', // 难度
        question: '', // 题干
        answerID: '', // 答案解析
        desc: '',
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      content: [], // 学科
      directory: [], // 目录
      enterprises: [], // 企业
      // 表单的验证规则对象
      pubFormRules: {
        subjectID: [
          { required: true, message: '请输入学科', trigger: 'blur' }
        ],
        catalogID: [
          {
            required: true,
            message: '请输入目录',
            trigger: 'blur'
          }
        ],
        enterpriseID: [
          {
            required: true,
            message: '请输入企业',
            trigger: 'blur'
          }
        ],
        city: [
          {
            required: true,
            message: '请输入城市',
            trigger: 'blur'
          }
        ],
        direction: [
          {
            required: true,
            message: '请输入方向',
            trigger: 'blur'
          }
        ],
        videoURL: [
          {
            required: true,
            message: '请输入视频解析',
            trigger: 'blur'
          }
        ],
        answerID: [
          {
            required: true,
            message: '请输入答案解析',
            trigger: 'blur'
          }
        ],
        content: [
          {
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          }
        ],
        remarks: [
          {
            required: true,
            message: '请输入题目备注',
            trigger: 'blur'
          }
        ],
        question: [
          {
            required: true,
            message: '请输入试题标签',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    // 刷新列表
    this.lodemList()
    // 目录
    this.catalog()
    // 城市
    this.Goprovinces()
    // 区
    this.Gocitys()
    // 方向
    this.enterprise()
  },
  methods: {
    // 新增复选框内容
    onAdd () {
      if (this.formDate.checkouted.length === 26) return this.$message.error('没有更多选项了')
      this.formDate.checkouted.push({
        code: String.fromCharCode(this.formDate.checkouted.length + 65), // 代码
        title: '', // 标题
        img: '', // 图片URL
        isRight: false // 是否正确答案
      })
    },
    // 试题标签
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 试题标签
    handleClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    // 试题标签
    handleInputConfirm () {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    // 控制按钮是否禁用 点击简答隐藏选框
    questionchange (e) {
      // 控制选项是否隐藏
      if (e === 3) {
        // 判断如果选择简答则隐藏整个选项框
        this.isShow = false
      }
      // 判断如果选择多选 激活按钮 隐藏单选框 显示多选框
      else if (e === 2) {
        // 显示选项框
        this.isShow = true
        // 激活按钮
        this.disableds = false
        // 显示多选框
        this.showCheckbox = true
        // 隐藏单选框
        this.radiochoice = false
      }
      // 判断如果选择单选框 禁用按钮 显示单选框 隐藏多选框 显示选项框
      else if (e === 1) {
        // 显示选项框
        this.isShow = true
        // 显示单选框
        this.radiochoice = true
        // 禁用按钮
        this.disableds = true
        // 隐藏多选框
        this.showCheckbox = false
      } else {
        this.$message.error('错误')
      }
    },
    // 图片上传
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 确认提交
    handleSubmit () {
      this.$refs.addForm.validate(async valid => {
        // 如果有一个不通过直接停止添加
        if (!valid) return
        // 全部验证完成后跳转到基础题库
        this.$refs.addForm.resetFields()
        this.$router.push('/questions/list')
      })
    },
    // 学科下拉框
    async lodemList () {
      const ret = await simple()
      this.content = ret.data
    },
    // 目录下拉框
    async catalog (el) {
      const ret = await simples()

      ret.data.forEach(item => {
        if (item.value === el) {
          this.directory = []
          this.directory.push(item)
        }
      })
      console.log(ret.data, '<<<<[=====================>')
    },
    // 市下拉框
    Goprovinces () {
      this.Onprovinces = provinces()
    },
    // 县下拉框
    Gocitys (e) {
      this.Oncitys = citys(e)
    },
    // 企业下拉框
    async enterprise () {
      const ret = await lists()
      this.enterprises = ret.data.items
    }
  }

}
</script>

<style>
.radiochoices {
  margin-top: 30px;
  margin-left: 150px;
  /* position: relative; */
}
h3 {
  margin-left: 60px;
}
.ql-editor {
  min-height: 300px;
}
.remarks {
  width: 400px;
  /* margin: 0 !important; */
  margin-left: 15px;
}
.boxstyle {
  padding: 80px, 20px, 0, 20px;
}
/* 上传图片 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.imgupload {
  margin-left: 280px;
  margin-top: -50px;
  position: relative;
}
.oninput {
  width: 230px;
}
/* tag 标签 */
.el-icon-circle-close {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  color: #409eff;
  font-size: 18px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
>>>>>>> 137875552f2efacb43668108598e0019e1ad86cf
